let data = [
    {value: '爱你孤身走暗巷子', time: 5, color: 'red', speed: 1, fontSize: 20},
    {value: '爱你不贵的摸样', time: 10, color: '#00af15', speed: 1, fontSize: 30},
    {value: 'hello world', time: 12 }
  ]
  let canvas = document.getElementById('canvas')
  let video = document.getElementById('video')
  let $text = document.getElementById('text')
  let $btn = document.getElementById('btn')
  let $color = document.getElementById('color')
  let $range = document.getElementById('range')
  
  // 展示弹幕
  class CanvasBarrage {
    constructor(canvas, video, options = {}) {
      if (!canvas || !video) return
  
      this.canvas = canvas
      this.video = video
      this.canvas.width = video.width
      this.canvas.height = video.height
      // 创建画布
      this.ctx = canvas.getContext('2d')
      // 设置默认参数
      let defOpts = {
        color: '#fff',
        speed: 1.5,
        opaity: 0.5,
        fontSize: 20,
        data: []
      }
      Object.assign(this, defOpts, options) // this.value
      this.isPaused = true // 初始为暂停状态
      // 读取所有的弹幕消息, 将每一条弹幕将来的样式处理好
      this.barrages = this.data.map((item) => {
        return new Barrage(item, this)
      })
      // 渲染所有的弹幕
      this.render()
    }
  
    render() {
      // 往画布上绘制内容前先清理画布
      this.clear()
      this.renderBarrage()
      if (!this.isPaused) {
        requestAnimationFrame(this.render.bind(this))
      }
    }
  
    clear() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    }
  
    renderBarrage() {
      // 读取到视频此时播放的时间
      let time = this.video.currentTime
  
      this.barrages.forEach(barrage => {
        if (!barrage.flag && time >= barrage.time) {
  
          // 弹幕是否初始化过
          if (!barrage.isInit) {
            barrage.init()
            barrage.isInit = true
          }
  
          barrage.x -= barrage.speed
          barrage.render()
  
          // 弹幕超出画布左侧, 则标记为已删除
          if (barrage.x < -barrage.width) {
            barrage.flag = true
          }
        }
      });
    }
  }
  
  // 处理每一条弹幕对象
  class Barrage {
    constructor(obj, ctx) {
      this.value = obj.value; // 弹幕的内容
      this.time = obj.time; // 弹幕的出现时间
      // 把obj和ctx都挂载到this上方便获取
      this.obj = obj
      this.context = ctx
    }
  
    // 初始化弹幕
    init() {
      // 如果数据里没有涉及到这4中参数，就直接取默认参数
      this.color = this.obj.color || this.context.color;
      this.speed = this.obj.speed || this.context.speed;
      this.opacity = this.obj.opacity || this.context.opacity;
      this.fontSize = this.obj.fontSize || this.context.fontSize;
  
      // 计算每一条弹幕的宽度
      let p = document.createElement('p')
      p.style.fontSize = this.fontSize + 'px'
      p.innerHTML = this.value
      document.body.appendChild(p)
  
      // 把p标签添加到body里，这样就可以拿到宽度
      // 设置弹幕的宽度
      this.width = p.clientWidth
      // 得到了弹幕的宽度后，就把p标签移除
      document.body.removeChild(p)
  
      // 设置弹幕出现的位置
      this.x = this.context.canvas.width
      this.y = this.context.canvas.height * Math.random()
  
      // 做一下超出范围的处理
      if (this.y < this.fontSize) {
        this.y = this.fontSize
      } else if (this.y > this.context.canvas.height - this.fontSize) {
        this.y = this.context.canvas.height - this.fontSize
      }
  
    }
  
    // 渲染每一条弹幕
    render() {
      // 设置画布文字的字体和字号
      this.context.ctx.font = `${this.fontSize}px Arial`
      // 设置一下画布的文字颜色
      this.context.ctx.fillStyle = this.color;
      // 绘制文字
      this.context.ctx.fillText(this.value, this.x, this.y)
    }
  }
  
  
  let canvasBarrage = new CanvasBarrage(canvas, video, {data})
  video.addEventListener('play', () => {
    canvasBarrage.isPaused = false
    canvasBarrage.render() // 所有弹幕开始渲染
  })